<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <!-- todo:申报人id 部门id 工程进度-->
        <el-form-item label="申报人名字" prop="pApplicantName">
          <el-input v-model="form.pApplicantName" placeholder="请输入工程申报人名字" />
        </el-form-item>
        <el-form-item label="工程负责人" prop="pHeader">
          <el-input v-model="form.pHeader" placeholder="请输入工程负责人" />
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="pHeaderEmail">
          <el-input v-model="form.pHeaderEmail" placeholder="请输入负责人邮箱" />
        </el-form-item>
        <el-form-item label="负责人电话" prop="pHeaderPhone">
          <el-input v-model="form.pHeaderPhone" placeholder="请输入负责人电话" />
        </el-form-item>
        <el-form-item label="工程性质">
          <el-select v-model="form.pNatureId" placeholder="请选择工程性质id">
            <el-option
              v-for="dict in pNatureIdOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程类别">
          <el-select v-model="form.pCategoryId" placeholder="请选择工程类别id">
            <el-option
              v-for="dict in pCategoryIdOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程等级">
          <el-select v-model="form.pLevelId" placeholder="请选择工程等级id">
            <el-option
              v-for="dict in pLevelIdOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程名称" prop="pName">
          <el-input v-model="form.pName" placeholder="请输入工程名称" />
        </el-form-item>
        <el-form-item label="工程内容" prop="pContent">
          <el-input v-model="form.pContent" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="工程效益分析" prop="pBenefitAnalysis">
          <el-input v-model="form.pBenefitAnalysis" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="工程成果形式">
          <el-select v-model="form.pResultFormId" placeholder="请选择工程成果形式id">
            <el-option
              v-for="dict in pResultFormIdOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程指导老师" prop="pGuideTeachers">
          <el-input v-model="form.pGuideTeachers" placeholder="请输入工程指导老师" />
        </el-form-item>
        <el-form-item label="工程团队成员" prop="pTeam">
          <el-input v-model="form.pTeam" placeholder="请输入工程团队成员" />
        </el-form-item>
        <el-form-item label="工程经费预算" prop="pFund">
          <el-input v-model="form.pFund" placeholder="请输入工程经费预算" />
        </el-form-item>
        <!-- todo:待输入
        <el-form-item label="工程进度id">
          <el-select v-model="form.pProgressId" placeholder="请选择工程进度id">
            <el-option
              v-for="dict in pProgressIdOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        -->
        <!--
        <el-form-item label="工程申报时间" prop="pApplyTime">
          <el-date-picker clearable size="small" style="width: 200px"
            v-model="form.pApplyTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择工程申报时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工程审核时间" prop="pAuditTime">
          <el-date-picker clearable size="small" style="width: 200px"
            v-model="form.pAuditTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择工程审核时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申报单位意见" prop="pUnitOpinion">
          <el-input v-model="form.pUnitOpinion" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="工程审批时间" prop="pApprovalTime">
          <el-date-picker clearable size="small" style="width: 200px"
            v-model="form.pApprovalTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择工程审批时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申报学院意见" prop="pInstituteOpinion">
          <el-input v-model="form.pInstituteOpinion" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="工程立项时间" prop="pStartTime">
          <el-date-picker clearable size="small" style="width: 200px"
            v-model="form.pStartTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择工程立项时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学校立项意见" prop="pCollegeOpinionStart">
          <el-input v-model="form.pCollegeOpinionStart" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="工程结项时间" prop="pEndTime">
          <el-date-picker clearable size="small" style="width: 200px"
            v-model="form.pEndTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择工程结项时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学校结项意见" prop="pCollegeOpinionEnd">
          <el-input v-model="form.pCollegeOpinionEnd" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        -->
        <el-form-item label="工程链接" prop="pLink">
          <el-input v-model="form.pLink" placeholder="请输入工程链接" />
        </el-form-item>
        <el-form-item label="工程成就" prop="pAchievement">
          <el-input v-model="form.pAchievement" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <!-- 文件上传 -->
      
      <el-upload
        class="upload-demo"
        :action="uploadImgUrl"
        name="file"
        :file-list="form.fileList"
        :headers="headers"
        :show-file-list="true"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :before-upload="uploadBefore"
        accept='.*'
      >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { listProject, getProject, delProject, addProject, updateProject, exportProject } from "@/api/declaration/project";
import { getToken } from '@/utils/auth';
import { listFiles, getFiles, delFiles, addFiles, updateFiles, exportFiles } from "@/api/declaration/files";

export default {
  name: "Add_Project",
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      //fileList: [],
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 工程认证申报数据表格数据
      projectList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 工程性质id字典
      pNatureIdOptions: [],
      // 工程类别id字典
      pCategoryIdOptions: [],
      // 工程等级id字典
      pLevelIdOptions: [],
      // 工程成果形式id字典
      pResultFormIdOptions: [],
      // 工程进度id字典
      pProgressIdOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pApplicantName: undefined,
        pHeader: undefined,
        pNatureId: undefined,
        pCategoryId: undefined,
        pLevelId: undefined,
        pName: undefined,
        pProgressId: undefined,
      },
      // 表单参数
      form: {fileList:[]},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    if(this.$route.query.pId!=undefined){
      this.queryParams.fSourceId=this.$route.query.pId;
      getProject(this.$route.query.pId).then(response => {
        this.form = response.data;
        //this.fileList=this.form.fileList;
        //this.fileList=JSON.parse(response.data.fileList);
        //alert(this.fileList);
    });
    }
    this.getList();
    this.getDicts("p_nature_id").then(response => {
      this.pNatureIdOptions = response.data;
    });
    this.getDicts("p_category_id").then(response => {
      this.pCategoryIdOptions = response.data;
    });
    this.getDicts("p_level_id").then(response => {
      this.pLevelIdOptions = response.data;
    });
    this.getDicts("p_result_form_id").then(response => {
      this.pResultFormIdOptions = response.data;
    });
    this.getDicts("p_progress_id").then(response => {
      this.pProgressIdOptions = response.data;
    });
  },
  methods: {
    // 富文本图片上传前
    uploadBefore(file) {
      /*let fileType = file.type;
			if(fileType === 'image/jpeg' || fileType === 'image/png'){
				return true;
			}else {
				this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
				return false;
      }*/
      return true;
    },

    uploadSuccess(res, file) {
      this.form.fileList.unshift({name:file.name,url:res.url})
      //alert(this.fileList[0].url);
      /*
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.quillEditor.quill;
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }*/
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.$message.error("文件是上传失败");
    },
    /** 查询工程认证申报数据列表 */
    getList() {
      this.loading = true;
      listProject(this.queryParams).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 工程性质id字典翻译
    pNatureIdFormat(row, column) {
      return this.selectDictLabel(this.pNatureIdOptions, row.pNatureId);
    },
    // 工程类别id字典翻译
    pCategoryIdFormat(row, column) {
      return this.selectDictLabel(this.pCategoryIdOptions, row.pCategoryId);
    },
    // 工程等级id字典翻译
    pLevelIdFormat(row, column) {
      return this.selectDictLabel(this.pLevelIdOptions, row.pLevelId);
    },
    // 工程成果形式id字典翻译
    pResultFormIdFormat(row, column) {
      return this.selectDictLabel(this.pResultFormIdOptions, row.pResultFormId);
    },
    // 工程进度id字典翻译
    pProgressIdFormat(row, column) {
      return this.selectDictLabel(this.pProgressIdOptions, row.pProgressId);
    },
    // 取消按钮
    cancel() {
      //this.open = false;
      this.$router.push({ path: "/declaration/project/my_project" });
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        pId: undefined,
        pApplicantId: undefined,
        pApplicantName: undefined,
        pApplyDeptId: undefined,
        pHeader: undefined,
        pHeaderEmail: undefined,
        pHeaderPhone: undefined,
        pNatureId: undefined,
        pCategoryId: undefined,
        pLevelId: undefined,
        pName: undefined,
        pContent: undefined,
        pBenefitAnalysis: undefined,
        pResultFormId: undefined,
        pGuideTeachers: undefined,
        pTeam: undefined,
        pFund: undefined,
        pProgressId: undefined,
        pApplyTime: undefined,
        pAuditTime: undefined,
        pUnitOpinion: undefined,
        pApprovalTime: undefined,
        pInstituteOpinion: undefined,
        pStartTime: undefined,
        pCollegeOpinionStart: undefined,
        pEndTime: undefined,
        pCollegeOpinionEnd: undefined,
        pLink: undefined,
        pAchievement: undefined,
        //fileList:undefined
        prName:undefined,
        prContent:undefined,
      };
      this.resetForm("form");
    },
  
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          //alert(this.form.fileList+":提交");
          //alert(JSON.stringify(this.form)+":json化");
          if (this.form.pId != undefined) {
            this.form.pProgressId='1';  // 修改后需要重新审核
            this.form.prName="修改";
            this.form.prContent="修改工程";
            updateProject(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addProject(JSON.stringify(this.form)).then(response => {
              if (response.code === 200) {
                this.msgSuccess("申报已提交");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
          //this.reload();
          this.$router.push({ path: "/declaration/project/my_project" });
        }
      });
    },
  }
};
</script>